import { useEffect, useState } from 'react';
// import { useNavigate } from 'react-router-dom';
import { Administratorlist, AdministratorDelete } from '../apis/administrator/index'
import { AneData } from '../apis/administrator/type'
import style from '../assets/scss/Administrator/Administrator.module.scss'
import MyAdminFrom from '../components/MyAdminFrom'
import {
  Button,
  Form,
  Table,
  Input,
  Pagination,
  Popconfirm,
  message
} from 'antd';
const Administrator = (): JSX.Element => {

  // 表单
  const [loginform] = Form.useForm();
  // 路由跳转
  // const navigate = useNavigate()

  // 表头
  const columns: any = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },


    {
      title: '登录账号',
      dataIndex: 'username',
      key: 'iusername',
    },

    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },

    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
    },

    {
      title: '类型',
      dataIndex: 'typeid',
      key: 'typeid',
    },

    {
      title: '操作',
      key: 'id',
      width: 165,
      render: (record: any,) => <div className={style.Button}>
        <Button className={style.Edit} onClick={AdmiEdit(record)} type="primary" >
          编辑
        </Button>
        <Popconfirm title="请确认是否删除？？"
          okText="确定"
          cancelText="取消"
          onConfirm={AdminDelete(record.id)}
        >
          <Button type="primary" danger >删除</Button>
        </Popconfirm>

      </div>
      ,
    },
  ]


  // 管理员列表参数
  let parameter: AneData = {
    key: '',
    page: 1,
    psize: 5
  }

  // 管理员列表数组
  const [Adminislsit, setlists] = useState([])

  // 页面总条数
  const [total, totaleit] = useState(0)

  // 获取管理员列表
  const GetAdminis = async () => {
    const res: any = await Administratorlist(parameter)
    console.log(res);
    if (res.errCode === 10000) {
      setlists(res.data.list)
      totaleit(res.data.counts)
    }
  }

  // 点击查询
  const onFinish = (values: any) => {
    console.log(values);
    parameter = { ...parameter, ...values, page: 1 }
    GetAdminis()
  };

  // 分页
  const onPageChange = async (current: number, size: number) => {
    console.log(current, size);
    parameter = { ...parameter, page: current, psize: size }
    GetAdminis()
  }


  // 删除
  const AdminDelete = (e: number) => {
    return async () => {
      const res: any = await AdministratorDelete({ id: e });
      console.log(res);
      if (res.errCode === 10000) {
        message.open({
          type: 'success',
          content: '删除成功',
        });
        GetAdminis()
      }
    }
  }

  // 表格选中的数组
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);


  // 获取表格选中的数据
  const onRoomChange = (houseno: React.Key[]) => {
    setSelectedRowKeys(houseno);
  };

  const NesSelection = { selectedRowKeys, onChange: onRoomChange, };


  // 对话框是否显示
  const [isMod, setIsMod] = useState(false);

  // 添加
  const Add = () => {
    setIsMod(true);
  }

  // 关闭对话框
  const onForm = () => {
    setIsMod(false);
    GetAdminis()
  }

  const feromsem = () => {
    setIsMod(false);
    GetAdminis()
  }

  // 点击编辑传递出去的数据
  const [Edit, setEdit] = useState({});

  // 编辑
  const AdmiEdit = (e: any) => {
    return () => {
      setIsMod(true);
      setEdit(e)
    }
  }
  useEffect(() => {
    GetAdminis()
  }, [])
  return (
    <div>
      <div className={style.Administrator}>
        <div className={style.Admintext}>
          <span>管理员列表</span>
        </div>

        <div className={style.AdminSearch}>
          <Form className={style.AdminFrom} form={loginform} onFinish={onFinish}>
            <Form.Item label="关键字" name='key'>
              <Input placeholder='关键字' />
            </Form.Item>

            <Form.Item className={style.earcwh}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>

          </Form>

          <Button className={style.Add} onClick={Add} type="primary" htmlType="submit">
            添加
          </Button>

        </div>

        {/* 表格 */}
        <Table
          rowSelection={{
            type: 'checkbox',
            ...NesSelection,
          }}
          rowKey={(record: any) => record.id}
          className={style.Table}
          pagination={false}
          dataSource={Adminislsit}
          columns={columns}
        >
        </Table>
        <Pagination
          className={style.Pagination}
          total={total}
          showTotal={(total) => `总条数 ${total} 条`}
          showQuickJumper
          showSizeChanger
          // hideOnSinglePage={true}
          defaultPageSize={parameter.psize}
          defaultCurrent={parameter.page}
          onChange={onPageChange}
        ></Pagination>
      </div>


      <MyAdminFrom Edit={Edit} onForm={onForm} isMod={isMod} feromsem={feromsem}></MyAdminFrom>

    </div >
  )
}
export default Administrator;